<template>
  <div class="dashboard-container">
    <!-- 数据统计卡片 -->
    <el-row :gutter="20" class="stats-cards">
      <el-col :span="8">
        <el-card class="stat-card">
          <div class="stat-header">
            <span class="stat-title">在架短剧数量</span>
            <el-icon class="stat-icon" color="#6366f1">
              <VideoCamera />
            </el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">1,248</div>
            <div class="stat-change positive">较昨日增加 5.2%</div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card class="stat-card">
          <div class="stat-header">
            <span class="stat-title">今日总流量</span>
            <el-icon class="stat-icon" color="#6366f1">
              <View />
            </el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">24.8M</div>
            <div class="stat-change positive">较昨日增加 12.7%</div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card class="stat-card">
          <div class="stat-header">
            <span class="stat-title">待审核规则</span>
            <el-icon class="stat-icon" color="#6366f1">
              <List />
            </el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">42</div>
            <div class="stat-change neutral">等待发布</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="chart-section">
      <el-col :span="24">
        <el-card class="chart-card">
          <div class="chart-header">
            <h3>短剧流量趋势分析</h3>
          </div>
          <div class="chart-container" ref="chartContainer" style="height: 400px;"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 热门短剧排行 -->
    <el-row :gutter="20" class="ranking-section">
      <el-col :span="24">
        <el-card class="ranking-card">
          <div class="ranking-header">
            <h3>热门短剧排行</h3>
          </div>
          <el-table :data="rankingData" style="width: 100%" stripe>
            <el-table-column prop="rank" label="排名" width="80" align="center" />
            <el-table-column prop="name" label="剧名" min-width="200" />
            <el-table-column prop="category" label="分类" width="100" align="center" />
            <el-table-column prop="tags" label="标签" width="150" align="center">
              <template #default="{ row }">
                <el-tag 
                  v-for="tag in row.tags" 
                  :key="tag" 
                  size="small" 
                  type="primary"
                  class="tag-item"
                >
                  {{ tag }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="totalViews" label="总流量" width="120" align="center" />
            <el-table-column prop="growthRate" label="增长率" width="120" align="center">
              <template #default="{ row }">
                <span :class="['growth-rate', row.growthRate.startsWith('+') ? 'positive' : 'negative']">
                  {{ row.growthRate }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="120" align="center">
              <template #default="{ row }">
                <el-tag 
                  :type="row.status === '热播中' ? 'success' : 'warning'"
                  size="small"
                >
                  {{ row.status }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ref, onMounted, nextTick } from 'vue'
import { VideoCamera, View, List } from '@element-plus/icons-vue'
import * as echarts from 'echarts'

export default {
  name: 'Dashboard',
  components: {
    VideoCamera,
    View,
    List
  },
  setup() {
    const chartContainer = ref(null)
    
    // 热门短剧排行数据
    const rankingData = ref([
      {
        rank: 1,
        name: '神豪娇娘之王者归来',
        category: '男频',
        tags: ['神豪', '都市'],
        totalViews: '8.4M',
        growthRate: '+12.5%',
        status: '热播中'
      },
      {
        rank: 2,
        name: '总裁的替身娇妻',
        category: '女频',
        tags: ['虐恋', '都市'],
        totalViews: '6.2M',
        growthRate: '+8.3%',
        status: '热播中'
      },
      {
        rank: 3,
        name: '萌宝助攻：爹地快追妈咪',
        category: '女频',
        tags: ['萌宝', '都市'],
        totalViews: '5.7M',
        growthRate: '+6.8%',
        status: '热播中'
      },
      {
        rank: 4,
        name: '重生之逆袭人生',
        category: '男频',
        tags: ['重生', '逆袭'],
        totalViews: '4.9M',
        growthRate: '+15.2%',
        status: '新上线'
      }
    ])

    // 初始化图表
    const initChart = () => {
      const chartDom = chartContainer.value
      const myChart = echarts.init(chartDom)
      
      // 生成24小时的时间数据
      const hours = []
      for (let i = 0; i < 24; i++) {
        hours.push(i.toString().padStart(2, '0') + ':00')
      }
      
      // 短剧数据
      const dramaList = [
        { name: '神豪娇娘之王者归来', color: '#6366f1' },
        { name: '总裁的替身娇妻', color: '#22c55e' },
        { name: '萌宝助攻：爹地快追妈咪', color: '#f59e0b' },
        { name: '重生之逆袭人生', color: '#ef4444' }
      ]
      
      // 为每个短剧生成24小时流量数据
      const seriesData = dramaList.map((drama, index) => {
        const data = []
        for (let i = 0; i < 24; i++) {
          // 不同短剧有不同的流量基准和变化模式
          const baseFlow = Math.sin((i - 6 - index * 2) * Math.PI / 12) * (40 - index * 8) + (80 - index * 15)
          const randomFactor = (Math.random() - 0.5) * 15
          data.push(Math.max(10, Math.round(baseFlow + randomFactor)))
        }
        
        return {
          name: drama.name,
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 4,
          itemStyle: {
            color: drama.color,
            borderColor: drama.color,
            borderWidth: 2
          },
          lineStyle: {
            color: drama.color,
            width: 2
          },
          data: data
        }
      })
      
      const option = {
        title: {
          show: false
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(255, 255, 255, 0.95)',
          borderColor: '#e4e7ed',
          borderWidth: 1,
          textStyle: {
            color: '#606266'
          },
          formatter: function(params) {
            let result = `时间: ${params[0].axisValue}<br/>`
            params.forEach(param => {
              result += `${param.seriesName}: ${param.value}万次观看<br/>`
            })
            return result
          }
        },
        legend: {
          data: dramaList.map(drama => drama.name),
          top: '10px',
          textStyle: {
            color: '#606266',
            fontSize: 12
          },
          itemWidth: 12,
          itemHeight: 8
        },
        grid: {
          left: '60px',
          right: '30px',
          top: '50px',
          bottom: '60px'
        },
        xAxis: {
          type: 'category',
          data: hours,
          axisLine: {
            lineStyle: {
              color: '#e4e7ed'
            }
          },
          axisTick: {
            lineStyle: {
              color: '#e4e7ed'
            }
          },
          axisLabel: {
            color: '#909399',
            fontSize: 12,
            interval: 1 // 显示所有刻度标签
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#f5f7fa',
              type: 'dashed'
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '观看次数(万)',
          nameTextStyle: {
            color: '#909399',
            fontSize: 12
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#909399',
            fontSize: 12,
            formatter: '{value}万'
          },
          splitLine: {
            lineStyle: {
              color: '#f5f7fa',
              type: 'dashed'
            }
          }
        },
        series: seriesData
      }
      
      myChart.setOption(option)
      
      // 响应式处理
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }

    onMounted(() => {
      nextTick(() => {
        initChart()
      })
    })

    return {
      chartContainer,
      rankingData
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 统计卡片样式 */
.stats-cards {
  margin-bottom: 20px;
}

.stat-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.stat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.stat-title {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.stat-icon {
  font-size: 20px;
}

.stat-content {
  text-align: left;
}

.stat-number {
  font-size: 32px;
  font-weight: bold;
  color: #1a1a1a;
  margin-bottom: 8px;
}

.stat-change {
  font-size: 12px;
  font-weight: 500;
}

.stat-change.positive {
  color: #22c55e;
}

.stat-change.negative {
  color: #ef4444;
}

.stat-change.neutral {
  color: #6b7280;
}

/* 图表区域样式 */
.chart-section {
  margin-bottom: 20px;
}

.chart-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.chart-header {
  padding: 0 0 20px 0;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}

.chart-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
}

.chart-container {
  width: 100%;
  height: 400px;
}

/* 排行榜样式 */
.ranking-section {
  margin-bottom: 20px;
}

.ranking-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.ranking-header {
  padding: 0 0 20px 0;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}

.ranking-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
}

.tag-item {
  margin-right: 4px;
}

.growth-rate.positive {
  color: #22c55e;
  font-weight: 600;
}

.growth-rate.negative {
  color: #ef4444;
  font-weight: 600;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .dashboard-container {
    padding: 10px;
  }
  
  .stats-cards .el-col {
    margin-bottom: 15px;
  }
  
  .stat-number {
    font-size: 24px;
  }
}
</style>